<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <el-button type="primary" @click="addOne()">添加分类</el-button>
      <!-- 列表 -->
      <tree-table :data="tableData" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border :show-row-hover="false">
        <!-- 是否有效 -->
        <template slot="isOk" slot-scope="scope">
          <i v-if="scope.row.cat_deleted === false" class="el-icon-error" style="color:red"></i>
          <i v-else class="el-icon-success" style="color:lightgreen"></i>
        </template>
        <!-- 排序 -->
        <template slot="order" slot-scope="scope">
          <el-tag v-if="scope.row.cat_level == 0">一级</el-tag>
          <el-tag v-if="scope.row.cat_level == 1" type="success">二级</el-tag>
          <el-tag v-if="scope.row.cat_level == 2" type="warning">三级</el-tag>
        </template>
        <!-- 操作 -->
        <template slot="opt" slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click.native="editOne(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click.native="removeOne(scope.row)">删除</el-button>
        </template>
      </tree-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 添加分类 -->
    <el-dialog title="添加分类" :visible.sync="dialogAddCateVisible" @close="addCateDialog()">
      <el-form :model="addForm" ref="addForm" :rules="rules" label-width="80px" :inline="false" size="normal">
        <el-form-item label="分类名称" prop="cat_name" placeholder="请输入分类名称">
          <el-input v-model="addForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类" v-if="type == 'add'" prop="password" placeholder="请选择父级分类">
          <el-cascader v-model="selectedCateId" :options="cateList" :props="cascaderProp" clearable @change="parenthandleChange"></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('addForm')">确定</el-button>
          <el-button @click="dialogAddCateVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      type: '', //类别
      //添加分类
      cascaderProp: {
        //指定级联对象配置选项
        // expandTrigger: 'hover' ,
        checkStrictly: true,
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },
      dialogAddCateVisible: false,
      selectedCateId: [], //选择分类id
      cateList: [], //父级分类列表
      addForm: {
        //添加的数据
        cat_name: '', //分类名称
        cat_pid: 0, //父级分类id,默认一级分类
        cat_level: 0 //分类等级，默认一级分类
      },
      rules: {
        cat_name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
      },
      //表格参数
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name'
        },
        {
          label: '是否有效',
          type: 'template', //类型是模板插槽
          template: 'isOk' //模板是插槽
        },
        {
          label: '排序',
          type: 'template', //类型是模板插槽
          template: 'order' //模板是插槽
        },
        {
          label: '操作',
          type: 'template', //类型是模板插槽
          template: 'opt' //模板是插槽
        }
      ]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList(type) {
      if (type == '1') {
        this.pageNum = 1
        this.pageSize = 10
      }
      const data = {
        type: 3,
        pagenum: this.pageNum,
        pagesize: this.pageSize
      }
      this.$http
        .get('/categories', { params: data })
        .then(res => {
          res = res.data
          // console.log(res)
          if (res.meta.status == 200) {
            this.tableData = res.data.result
            this.total = res.data.total
            //  console.log('tableData',this.tableData)
          } else {
            this.$message({ type: 'error', message: res.meta.msg })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getParentList() {
      //获取父级分类
      const data = {
        type: 2
      }
      this.$http
        .get('/categories', { params: data })
        .then(res => {
          res = res.data
          // console.log(res)
          if (res.meta.status == 200) {
            this.cateList = res.data
            //  console.log('cateList',this.cateList)
          } else {
            this.$message({ type: 'error', message: res.meta.msg })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    addCateDialog() {
      //关闭弹窗时,重置表单
      this.$refs.addForm.resetFields()
      this.selectedCateId = []
      this.addForm.cat_pid = 0
      this.addForm.cat_level = 0
    },
    parenthandleChange() {
      console.log(this.selectedCateId)
      if (this.selectedCateId.length > 0) {
        //大于0，说明选中父级分类
        //父级分类id
        this.addForm.cat_pid = this.selectedCateId[this.selectedCateId.length - 1]
        this.addForm.cat_level = this.selectedCateId.length
        return
      } else {
        this.addForm.cat_pid = 0
        this.addForm.cat_level = 0
      }
    },
    addOne() {
      //添加分类显示
      this.type = 'add'
      this.getParentList()
      this.dialogAddCateVisible = true
    },
    editOne(row) {
      this.type = 'edit'
      this.addForm.cat_name = JSON.parse(JSON.stringify(row)).cat_name
      this.addForm.id = row.cat_id
      this.dialogAddCateVisible = true
    },
    onSubmit(formName) {
      //确定
      console.log('addForm', this.addForm)
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.type == 'add') {
            this.addSubmit()
          } else {
            this.editSubmit()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    addSubmit() {
      //新增提交数据
      const data = {
        cat_name: this.addForm.cat_name,
        cat_pid: this.addForm.cat_pid,
        cat_level: this.addForm.cat_level
      }
      console.log('data', data)
      this.$confirm(`确定提交?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http
          .post(`/categories`, data)
          .then(res => {
            res = res.data
            // console.log(res)
            if (res.meta.status == 201) {
              this.dialogAddCateVisible = false
              this.$message({ type: 'success', message: res.meta.msg })
              this.getList('1')
            } else {
              this.$message({ type: 'error', message: res.meta.msg })
            }
          })
          .catch(err => {
            console.log(err)
          })
      })
    },
    editSubmit() {
      //修改提交数据
      const data = {
        id: this.addForm.cat_id,
        cat_name: this.addForm.cat_name
      }
      console.log('data', data)
      this.$confirm(`确定提交?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http
          .put(`/categories/${this.addForm.id}`, data)
          .then(res => {
            res = res.data
            // console.log(res)
            if (res.meta.status == 200) {
              this.dialogAddCateVisible = false
              this.$message({ type: 'success', message: '修改成功!' })
              this.getList('1')
            } else {
              this.$message({ type: 'error', message: res.meta.msg })
            }
          })
          .catch(err => {
            console.log(err)
          })
      })
    },
    removeOne(row) {
      //删除用户
      const data = {
        id: row.id
      }
      console.log('data', data)
      this.$confirm(`确定删除分类${row.cat_name}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http
          .delete(`/categories/${row.id}`, data)
          .then(res => {
            res = res.data
            // console.log(res)
            if (res.meta.status == 200) {
              this.getList('1')
              this.$message({ type: 'success', message: '删除成功!' })
            } else {
              this.$message({ type: 'error', message: res.meta.msg })
            }
          })
          .catch(err => {
            console.log(err)
          })
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getList()
    }
  }
}
</script>
